<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<!-- 垂直 -->
		<div class="btn-group-vertical">
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>
	</div>

<!-- 按钮组 -->
		<div class="btn-toolbar">
			<div class="btn-group">
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
			</div>
			<div class="btn-group">
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
				<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
			</div>
		</div>

<!-- 在最大的显示器上 显示大、中、小 -->
	<div class="container">
		<div class="btn-group btn-group-lg">
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>
		<div class="btn-group btn-group-sm">
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>
		<div class="btn-group btn-group-xs">
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>
	</div>

	<div class="btn-group">
		<button type="button" class="btn btn-default">1</button>
		<button type="button" class="btn btn-default">2</button>
		<div class="btn-group">
		<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">下拉菜单
        	   <span class="caret"></span>
    	</button>
   		    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
				<li><a href="#">点我</a></li>
				<li><a href="#">点我</a></li>
			</ul>
		</div>
	</div>

<!-- 充满整个屏幕宽度 -->
	<div class="btn-group btn-group-justified">
		<div class="btn-group">
			<button type="button" class="btn btn-default">Left</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default">Middle</button>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-default">Right</button>
		</div>
	</div>

<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>